<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
    <el-tab-pane label="楼栋管理" name="first">
      <building></building>
    </el-tab-pane>
    <el-tab-pane label="教室管理" name="second">
      <classroom></classroom>
    </el-tab-pane>
    <el-tab-pane label="宿舍管理" name="third">
      <dormitory></dormitory>
    </el-tab-pane>
  </el-tabs>


    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="30%">
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="位置名称" prop="locationName">
                    <el-input v-model="form.locationName" @change="changeName"></el-input>
                </el-form-item>
                <el-form-item label="上级位置">
                  <el-select v-model="form.locationPid" @change="changePid" style="width:100%">
                      <el-option  label="请选择" value="0"></el-option>
                      <el-option v-for="item in selectedList" :key="item.id"
                      :label="item.levelName" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="层级名称" >
                    <el-input v-model="form.levelName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="位置类型" >
                  <el-radio v-model="form.locationType" label="1">楼栋</el-radio>
                  <!-- <el-radio v-model="form.locationType" label="2">楼层</el-radio>
                  <el-radio v-model="form.locationType" label="3">办公室</el-radio>
                  <el-radio v-model="form.locationType" label="4">教室</el-radio>
                  <el-radio v-model="form.locationType" label="5">实验室</el-radio>
                  <el-radio v-model="form.locationType" label="6">宿舍</el-radio>
                  <el-radio v-model="form.locationType" label="7">会议室</el-radio>
                  <el-radio v-model="form.locationType" label="99">其他</el-radio> -->
                </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { findBaseSpaceLocationPageList, addOrUpdateBaseSpaceLocationInfo, deleteBaseSpaceLocationInfo,} from "@/api/baseData/siteManagement";
import building from "@/views/baseData/siteManagement/building"
import classroom from "@/views/baseData/siteManagement/classroom"
import dormitory from "@/views/baseData/siteManagement/dormitory"



export default {
  name: "BClass",
  components: {
    building,
    classroom,
    dormitory
  },
  data() {
    return {
      activeName: 'first',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      stuCount: 0,
      // 字典表格数据
      bclassList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 班主任
      userOptions: [],
      // 状态数据字典
      statusOptions: [],
      // 班级所属部门
      classDeptOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        locationType: 4,
        status: undefined,
        classDept:undefined
      },
      // 表单参数
      form: {
        locationPid: 0
      },
      // 表单校验
      rules: {
          locationName: [
          { required: true, message: "请填写位置名称", trigger: "blur" }
        ]
      },
      selectedList:[],
      schoolList:[]
    };
  },
  created() {
    this.getList();
    findBaseSpaceLocationPageList({pageNum:1,pageSize:1000}).then(response => {
          this.selectedList = response.data.list;
      });
  },
  methods: {
    getSchoolName(id){
      for(let i=0;i<this.schoolList.length;i++){
        if(this.schoolList[i].id==id){
          return this.schoolList[i].schoolName
        }
      }
    },

      changePid(val){

          let levelName = ""
          for(var i=0;i<this.selectedList.length;i++){
              if(val==this.selectedList[i].id){
                  levelName = this.selectedList[i].levelName

              }
          }
          if(levelName){
              // this.form.levelName = this.form.locationName + '-' + this.selectedList[i].levelName
              this.$set(this.form,"levelName",  levelName + '-' + (this.form.locationName || ''))
          }else{
              // this.form.levelName = this.form.locationName
              this.$set(this.form,"levelName",this.form.locationName)
          }
      },
      changeName(){
          this.changePid(this.form.locationPid)
      },
    /** 查询班级列表 */
    getList() {
      this.loading = true;
      this.bclassList=[]
      findBaseSpaceLocationPageList(this.queryParams).then(response => {
          this.bclassList = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        }
      );
    },
    // 字典设备状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 字典设备状态字典翻译
    classDeptFormat(row, column) {
      return this.selectDictLabel(this.classDeptOptions, row.classDept);
    },
    // 班级状态修改
    handleStatusChange(row) {
        let text = row.status === "1" ? "启用" : "停用";
        this.$confirm('确认要 ' + text + ' "' + row.userName + '"吗?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return addOrUpdateIPassUser(row);
          }).then(() => {
            this.msgSuccess(text + "成功");
          }).catch(function() {
            row.userStatus = row.userStatus === "2" ? "1" : "2";
          });



    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
          locationPid:null,
          locationName:null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      if(this.queryParams.locationName){
          this.queryParams.locationPid=null
      }else{
          this.queryParams.locationPid=0
      }

      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");

      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.reset();
      this.open = true;
      this.title = "添加空间位置";
      this.form.locationPid = Number(row.id) || '0'
      this.disabledInput=false;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.open = true
      this.form = row
      this.form.locationPid = Number(row.locationPid)

    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.level = this.form.levelName.split("-").length
          this.form.status=1
          addOrUpdateBaseSpaceLocationInfo(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("提交成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.message);
              }
            });

        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除班级编号为"' + ids + '"的数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(function() {
                return deleteBaseSpaceLocationInfo(row);
              }).then(() => {
                this.getList();
                this.msgSuccess("删除成功");
              }).catch(function() {});

    },
    loadChildData(tree, treeNode, resolve){
      console.log(treeNode)
      console.log(tree)
      findBaseSpaceLocationPageList({pageNum:1,pageSize:1000,locationPid:tree.id}).then(response => {
          resolve(response.data.list)
        }
      );


    }
  }
};
</script>
